<!DOCTYPE html>
<html class="am-touch js cssanimations">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>现金券</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="renderer" content="webkit" />
    <link rel="icon" type="image/png" href="../assets/i/favicon.png" />
    <link rel="stylesheet" href="../assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="../assets/css/basic.css" />
    <link rel="stylesheet" href="../assets/css/app.css" />
    <style type="text/css">
        header.am-header h3.am-text-lg p{ width: 100%; }

        p.am-text-sm{ padding-top: 10px; }
        p.am-text-lg{ font-size: 1.4rem; }
        p.am-text-lg, p.am-text-sm{ color: #000000; }
        .kuaikuai-pic .kuaikuai-pos{ left: 36%; top: 15%; }
        .kuaikuai-pos-lf{
            position: absolute;
            left: 13%;
            top: 16%;
            display: inline;
            color: #fff;
            font-size: 48px;
            height: 48px;
        }
        @media only screen and (max-width: 330px) {
            p.am-text-sm{ padding-top: 3px; }
            p.am-text-lg{ font-size: 1.0rem; }
            p.am-text-lg, p.am-text-sm{ color: #000000; }
            .kuaikuai-pic .kuaikuai-pos{ left: 36%; top: 15%; }
            .kuaikuai-pos-lf{
                position: absolute;
                left: 15%;
                top: 15%;
                display: inline;
                color: #fff;
                font-size: 36px;
                height: 36px;
            }
        }

        @media only screen and (min-width:330px) and (max-width: 380px) {
            p.am-text-sm{ padding-top: 8px; }
            p.am-text-lg{ font-size: 1.4rem; }
            p.am-text-lg, p.am-text-sm{ color: #000000; }
            .kuaikuai-pic .kuaikuai-pos{ left: 36%; top: 15%; }
            .kuaikuai-pos-lf{
                position: absolute;
                left: 13%;
                top: 8%;
                display: inline;
                color: #fff;
                font-size: 48px;
                height: 48px;
            }
        }

        @media only screen and (min-width:390px) and (max-width: 480px) {
            p.am-text-sm{ padding-top: 10px; }
            p.am-text-lg{ font-size: 1.4rem; }
            p.am-text-lg, p.am-text-sm{ color: #000000; }
            .kuaikuai-pic .kuaikuai-pos{ left: 36%; top: 15%; }
            .kuaikuai-pos-lf{
                position: absolute;
                left: 13%;
                top: 15%;
                display: inline;
                color: #fff;
                font-size: 48px;
                height: 48px;
            }
        }

        @media only screen and (min-width:481px) and (max-width: 580px) {
            p.am-text-sm{ padding-top: 10px; }
            p.am-text-lg{ font-size: 1.4rem; }
            p.am-text-lg, p.am-text-sm{ color: #000000; }
            .kuaikuai-pic .kuaikuai-pos{ left: 36%; top: 15%; }
            .kuaikuai-pos-lf{
                position: absolute;
                left: 13%;
                top: 16%;
                display: inline;
                color: #fff;
                font-size: 54px;
                height: 54px;
            }
        }

        .am-header a{ color: #333333; }
    </style>
</head>
<body style="background-color: #f4f4f4">
    <header class="am-header" style="padding: 0 13px; margin-bottom: 10px;">
        <h3 class="am-text-lg" style="border: 1px solid #eee; background-color: #fff;">
            <a href="ticketUsed.html">代金券使用说明</a>
        </h3>
    </header>
    <section class="am am-figure am-figure-default kuaikuai-pic">
        <img src="../assets/i/ticket/q1.png" data-rel="../assets/i/ticket/q1.png" />
        <div class="kuaikuai-pos-lf">
            <p class="valCl">18</p>
        </div>
        <div class="kuaikuai-pos">
            <p class="am-text-lg">购买快快极致打蜡消费券时</p>
            <p class="am-text-lg">自动抵扣（每次只能使用1次）</p>
            <p class="am-text-sm">有效截止日期：2015-3-9</p>
        </div>
    </section>

    <section class="am am-figure am-figure-default kuaikuai-pic">
        <img src="../assets/i/ticket/q1-out.png" data-rel="../assets/i/ticket/q1-out.png" />
        <div class="kuaikuai-pos-lf">
            <p class="valCl">8</p>
        </div>
        <div class="kuaikuai-pos">
            <p class="am-text-lg">购买快快极致打蜡消费券时</p>
            <p class="am-text-lg">自动抵扣（每次只能使用1次）</p>
            <p class="am-text-sm">有效日期：2015-6-10 10:06</p>
        </div>
    </section>
<script type="text/javascript" src="../assets/js/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        var valStr = $('p.valCl');
        var result = new Array();
        for (var i = 0; i < valStr.length; i++) {
            result.push($(valStr[i]).text());
            if (result[i] < 10) {
                result[i] = "0" + result[i];
                $(valStr[i]).css("paddingLeft","5px");
            }
        }

        for (var j = 0; j < result.length; j++) {
            $(valStr[j]).html(result[j]);
        }
    });
</script>
</body>
</html>